/**
 * Created by asus on 2016/11/22.
 */
import React, { Component,PropTypes } from 'react';
import {Link} from 'react-router';
import {BindingAccName,Binding} from '../../Action/auth'
import {ErrorNum,ErrorPs} from '../../Action/rpc'
import Top from '../CommonComponent/Top'

export default class BindPhoneNum extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            step : 1,
            codeWord : '',
            disabled : false,
            smsCode : '',
            Reminder : ''
        };
    }

    componentWillMount() {
        console.log('sss',this.context.router)
    }

    static contextTypes = {
        router:PropTypes.object
    }

    async getCode(){
        clearInterval(this._timer)
        if (!ErrorNum(this.refs.mobile.value)) {
            this.setState({Reminder:'手机号码有误,请重新填写'})
            return
        }
        await Binding(this.refs.mobile.value)
            .then(res=>{
                console.log('获取验证码成功',res)
                this.setState({codeWord:60,disabled:true})
                //倒计时
                this._timer = self.setInterval(()=>this.timer(),1000)
            })
            .catch(err=>{
                this.setState({Reminder:err.message})
            })
    }

    isTrue(value,parameter){
        this.setState({Reminder:''})
        if(parameter === 'phoneNum'){
            if (!ErrorNum(value)) {
                this.setState({Reminder:'手机号码有误,请重新填写'})
            }
        }
        if(parameter === 'pwd'){
            if (!ErrorPs(value)) {
                this.setState({Reminder:'密码格式错误，请输入6～16位字符，至少包含数字、大写字母、小写字母、符号中的两种!'})
            }
        }
    }

    //获取短信验证码倒计时
    timer(){
        if(this.state.codeWord>0){
            this.setState({codeWord:this.state.codeWord-1})
        }else{
            this.setState({codeWord:'',disabled:false})
            clearInterval(this._timer)
        }
    }

    async toBind(){
        if(this.refs.pwd.value==''){
            this.setState({Reminder:'密码不能为空'})
            return
        }
        if(this.refs.pwd.value != this.refs.twoPwd.value){
            this.setState({Reminder:'两次密码输入不一致,请重新输入'})
            return
        }
        if(this.refs.mobile.value==''){
            this.setState({Reminder:'手机号不能为空'})
            return
        }
        if(this.refs.code.value==''){
            this.setState({Reminder:'验证码不能为空'})
            return
        }

        await BindingAccName(this.refs.code.value,this.refs.mobile.value,this.refs.pwd.value)
            .then(res=>{
                alert('手机号绑定成功')
                clearInterval(this._timer)
                this.context.router.goBack()
            })
            .catch(err=>{
                this.setState({Reminder:err.message})
            })
    }


    render(){
        return(
            <div>
                <Top
                    title ={'绑定手机号'}
                />
                <div>
                    <div className='editorBox_100' style={{marginTop:50}}>
                        <input
                            ref = 'mobile'
                            maxLength="11"
                            className="f14"
                            placeholder="请输入手机号"
                            onBlur = {()=>this.isTrue(this.refs.mobile.value,'phoneNum')}
                        />
                    </div>

                    <div className='editorBox_100'>

                        <input
                            ref = 'code'
                            maxLength="6"
                            className="f14"
                            placeholder="请填写手机的验证码"
                        />
                        <input
                            id="bindCode"
                            type="button"
                            disabled={this.state.disabled}
                            onClick={()=>this.getCode()}
                            value={this.state.codeWord?this.state.codeWord+'秒':'点击获取验证码'}
                        />
                    </div>
                    <div className='editorBox_100'>
                        <input
                            ref = 'pwd'
                            style={{flex:1}}
                            maxLength="11"
                            className="f14"
                            placeholder="请输入密码"
                            type="password"
                            onBlur = {()=>this.isTrue(this.refs.pwd.value,'pwd')}
                        />
                    </div>

                    <div className='editorBox_100'>
                        <input
                            ref = 'twoPwd'
                            style={{flex:1}}
                            maxLength="11"
                            className="f14"
                            placeholder="再次确认密码"
                            type="password"
                        />
                    </div>

                    <div className="tc f12 colorRed width100 mtb" style={{padding:'5px 10px'}}>
                        {this.state.Reminder}
                    </div>

                    <button
                        onClick = {()=>this.toBind()}
                        className="toLogin"
                    >
                        确 定
                    </button>
                </div>
            </div>
        )
    }
}